<!Doctype html>
<html>

<head>
    <meta charset="UTF-8" />
    <script src="http://code.jquery.com/jquery-1.7.1.js" type="text/javascript"></script>
    <style type="text/css">
        body {
            padding: 0;
            margin: 0;
            background: #eee;
        }

        #my-lucky {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }


        .title {
            position: absolute;
            /* top: 50%; */
            left: 50%;
            transform: translateX(-50%);
            font-size: 34px;
            font-weight: bold;
        }

        .logo {
            width: 500px;
            margin: 30px 20px 0;
        }

        .logo img {
            width: 100%;
        }


        @media only screen and (min-width: 400px) and (max-width: 1024px) {
            .logo {
                width: 80%;
                margin: 100px auto;
            }

            .title {
                font-size: 44px;
                font-weight: bold;
            }
        }
    </style>

</head>

<body>
    <div class="logo">
        <img src="./img/logo.png" alt="">
    </div>
    <div class="title">抽奖活动</div>
    <div id="my-lucky"></div>
    <script src="https://unpkg.com/lucky-canvas@1.7.25"></script>
    <script>
        let randmArr = [5, 10, 20, 50, 100, 200]
        const myLucky = new LuckyCanvas.LuckyWheel('#my-lucky', {
            width: '600px',
            height: '600px',
            blocks: [{ padding: '10px', background: '#617df2' }],
            prizes: [
                { background: '#e9e8fe', fonts: [{ text: '5元', fontSize: '50px' }] },
                { background: '#b8c5f2', fonts: [{ text: '10元', fontSize: '50px' }] },
                { background: '#e9e8fe', fonts: [{ text: '20元', fontSize: '50px' }] },
                { background: '#b8c5f2', fonts: [{ text: '50元', fontSize: '50px' }] },
                { background: '#e9e8fe', fonts: [{ text: '100元', fontSize: '50px' }] },
                { background: '#b8c5f2', fonts: [{ text: '200元', fontSize: '50px' }] },
            ],
            buttons: [{
                radius: '35%',
                background: '#8a9bf3',
                pointer: true,
                fonts: [{ text: '开始', top: '-30px', fontSize: '50px' }]
            }],
            start: function () {
                // 开始游戏
                myLucky.play()
                // 使用定时器模拟接口
                setTimeout(() => {
                    // 结束游戏
                    index = getinfo();
                    myLucky.stop(index)
                }, 3000)
            },
            end: function (e) {
            }
        })
        function getinfo() {
            var index = null;
            var num = Math.random();
            for (var i = 0; i < 1000; i++) {
                if (num < 0) {
                    index = 5
                }
                else if (num > 0.001 && num <= 0.100) {
                    index = 0
                }
                else if (num > 0.001 && num <= 0.101) {
                    index = 2
                }
                else if (num > 0.101 && num < 1) {
                    index = 1
                }
            }
            return index;
        } 
    </script>
</body>

</html>